<template>
  <div>
    <br>
    <el-table
      :data="users"
      stripe border style="width:100%" highlight-current-row>
      <el-table-column label="信息查看" align="center">
        <el-table-column
          prop="img"
          label="头像">
          <template slot-scope="scope">
            <img style="width:80px;height:100px" :src=scope.row.img>
            <!--              <img style="width:80px;height:100px" src="../../assets/1.png">-->
            <!--              {{scope.row.img}}-->
            <!--              <img src="../../assets/queen.png">-->
          </template>

        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别">
        </el-table-column>

        <el-table-column
          prop="age"
          label="年龄">
        </el-table-column>

        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>

        <el-table-column
          prop="introduction"
          label="简介">
        </el-table-column>
        <el-table-column
          prop="operate"
          label="执行操作">
          <!--获取插槽上的属性值-->
          <template slot-scope="scope">
            <!--            <el-button type="text" @click="update(scope.row.id)">更新</el-button>-->
            <!--            <el-button type="text" @click="deleteData(scope.row.id)">删除</el-button>-->
            <el-button type="info" @click="updateButton(scope.row)">修改</el-button>
            <el-dialog title="修改" :visible.sync="update" width="50%" center>
              <el-form :model="user" ref="user" label-width="100px" style="margin-left: 100px">
                <el-form-item label="图片" prop="img">
                  <el-input :="user.img" type="text" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                  <el-input :="user.userName" type="text" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input :="user.password" type="text" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="user.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input :="user.age" type="text" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input :="user.address" type="text" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="introduction">
                  <el-input :="user.introduction" type="textarea" style="width: 250px"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button :click="showClose = true">取消</el-button>
                  <el-button type="primary" @click="update =false" v-on:click="updateClick('user')">修改</el-button>
                </span>
            </el-dialog>
            <el-button type="info" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "UserInformation",
    data() {
      return {
        centerDialogVisible: false,
        showClose: true,
        update: false,
        x: 0,
        message: 0,
        users: [],
        user: {
          userName: '',
          password: '',
          age: '',
          sex: '',
          img: '',
          address: 0,
          introduction: '',
        }
      }
    },
    mounted() {
      this.check()
    },
    methods: {
      formatter(row, column) {
        return row.delivery === 1 ? '是' : '否';
      },
      check() {
        this.$http.post('http://localhost:8888/showAllPerson').then(res => {
          this.users = res.data.data;
          // console.log(this.users)
        });
      },
      updateButton(formName) {
        this.update = true;
        this.user = formName;
        this.check()
      },
      updateClick() {
        console.log(1);
        console.log(this.user);
        this.user.delivery = this.user.delivery === false ? 0 : 1;
        this.$http.post('http://localhost:8888/updateUser', this.user, {emulateJSON: true}).then(res => {
          alert(res.data.msg)
        });
        this.check();
      },
      deleteUser(id) {
        console.log(id);
        this.$http.post('http://localhost:8888/deleteUser', {id: id}, {emulateJSON: true}).then(res => {
          alert(res.data.msg)
        });
        this.check();
      },
    }
  }
</script>

<style scoped>

</style>

